/**
 * 文件类型图标组件
 * @author SPY
 * @description 用于显示文件对应格式的线上图标,网址:https://www.iconfont.cn/
 * @date 2019/11/21
 */

import React from 'react';
import PropTypes from 'prop-types';
import DynamicScript from './DynamicScript';

class FileTypeChangeIcon extends React.Component {

    // 定义传入属性
    static propTypes = {
        fileType: PropTypes.string,   // 文件类型,如“txt”、“pdf”、“doc”、“jpg”
        width: PropTypes.number,  // 图标的宽度
        height: PropTypes.number, // 图标的高度 
    }

    // 定义传入属性的默认值
    static defaultProps = {
        fileType: null, // fileType、fileName同时存在时,fileType的优先级较高,故二选一,不建议两者同时传入
        width: 30,
        height: 30,
    }

    /**
     * 生成图标函数
     * @param fileType -- 图标的格式类型
     */
    generateIcon = (fileType) => {
        const { width, height } = this.props;
        const styleParams = {
            width,
            height,
            verticalAlign: 'middle' //解决图标和文字的垂直居中问题
        };
        return (
            <>
                <DynamicScript url='//at.alicdn.com/t/font_353584_brd5lbqmlzf.js' />
                <span>
                    <svg aria-hidden="true" style={styleParams}>
                        <use xlinkHref={`#icon-${fileType}`}></use>
                    </svg>
                </span>
            </>
        );
    }


    render() {
        const { fileType } = this.props;
        const hasFileType = ['doc', 'docx', 'fla', 'gif', 'jpg', 'mkv', 'mov', 'mp3', 'mp4', 'mpg', 'pdf', 'png',
            'ppt', 'pptx', 'svg', 'txt', 'wav', 'wma', 'wmv', 'xls', 'xlsx'];

        if (hasFileType.indexOf(fileType) >= 0) {
            return this.generateIcon(fileType);
        }
        return this.generateIcon('weizhi');
    }
}

export default FileTypeChangeIcon;